<script setup lang="ts">
import { useAsyncData } from 'nuxt/app';
    const contactUsInfo = {
      title: '联系我们',
      subTitle1: '咨询全球收单解决方案:',
      list1: [
        {
          id: "1",
          title: "演示产品功能"
        },
        {
          id: "2",
          title: "基于您的业务需求，制定一整套收单解决方案"
        },
        {
          id: "3",
          title: "介绍定价、测算成本"
        },
        {
          id: "4",
          title: "提供产品集成的技术支持"
        },
      ],
      subTitle2: '我们提供:',
      list2: [
        {
          id: "1",
          title: "多场景可用的支付工具"
        },
        {
          id: "2",
          title: "提升营收的增强功能"
        },
        {
          id: "3",
          title: "数字化营销解决方案"
        },
        {
          id: "4",
          title: "覆盖全球的支付能力"
        },
        {
          id: "5",
          title: "百位专家打造的顶尖风控系统"
        },
      ],
    }

  const valid = ref(false)
  const formInfo = reactive({
      name: '',
      surname: '',
      email: '',
      code: '',
      phone: '',
      company: '',
      address: '',
      country: '',
      agree: false
  })

  const nameRules = [
    value => {
      if (value) return true

      return 'Name is required.'
    },
    value => {
      if (value?.length <= 10) return true

      return 'Name must be less than 10 characters.'
    },
  ]
  const emailRules = [
    value => {
      if (value) return true

      return 'E-mail is requred.'
    },
    value => {
      if (/.+@.+\..+/.test(value)) return true

      return 'E-mail must be valid.'
    },
  ]
  const areaData = ref([])
  const { data, error } = await useAsyncData('fetchData', async () => {
    const response = await fetch('https://restcountries.com/v3.1/all');
    if (!response.ok) {
      throw new Error('Failed to fetch');
    }
      return response.json();
  });
  console.log(data.value)
  areaData.value = data.value.map(item => {
    return item.translations?.zho?.common || item.name.nativeName.zho.common
  }).filter(item => !!item).sort((a, b) => 
  a.localeCompare(b, 'zh', { sensitivity: 'base' })
);
  console.log(areaData.value)
</script>

<template>
  <v-app>
    <v-sheet color="#fff">
      <div class="d-flex py-16 mt-40">
        <v-sheet color="transparent" class=" w-[90%] mx-auto d-flex">
            <div class="w-6/12 d-flex flex-column pl-[322px]">
                <div>
                    <v-img width="200px" height="200px" src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/contact-us.69d990a1.svg"></v-img>
                </div>
                <h1 class="text-5xl font-bold my-20">{{ contactUsInfo.title }}</h1>
                <div class="d-flex flex-column">
                  <h2 class="text-2xl font-bold mb-10">{{ contactUsInfo.subTitle1 }}</h2>
                  <div class="d-flex align-center text-xl  mb-[16px]" v-for="item in contactUsInfo.list1" :key="item.id">
                    <div class="w-[22px] h-[22px] bg-[#00b6ff] rounded-tl-[4px] rounded-tr-[4px] rounded-br-[4px] rounded-bl-[10px] mr-[16px]"></div>
                    <span>{{ item.title }}</span>
                  </div>
                </div>
                <div class="d-flex flex-column">
                  <h2 class="text-2xl font-bold mb-10">{{ contactUsInfo.subTitle2 }}</h2>
                  <div class="d-flex align-center text-xl  mb-[16px]" v-for="item in contactUsInfo.list2" :key="item.id">
                    <div class="w-[22px] h-[22px] bg-[#00b6ff] rounded-tl-[4px] rounded-tr-[4px] rounded-br-[4px] rounded-bl-[10px] mr-[16px]"></div>
                    <span>{{ item.title }}</span>
                  </div>
                </div>
            </div>
            <div class="w-[1px] h-[100%] bg-[#98a6bb]"></div>
            <div class="w-5/12 pl-[40px]">
              <v-form v-model="valid">
                <v-container>
                  <v-row>
                    <v-col
                      cols="12"
                      md="6"
                    >
                      <div class="d-flex align-center text-[20px] text-[rgba(0,0,0,.85)] mb-[8px]">
                        <span class="text-[#ff4d4f] mr-[4px] text-[14px]">*</span>
                        <span>名字</span>
                      </div>
                      <v-text-field
                        v-model="formInfo.name"
                        :counter="10"
                        :rules="nameRules"
                        label="三"
                        hide-details
                        required
                      ></v-text-field>
                    </v-col>

                    <v-col
                      cols="12"
                      md="6"
                    >
                      <div class="d-flex align-center text-[20px] text-[rgba(0,0,0,.85)] mb-[8px]">
                        <span class="text-[#ff4d4f] mr-[4px] text-[14px]">*</span>
                        <span>姓氏</span>
                      </div>
                      <v-text-field
                        v-model="formInfo.surname"
                        :counter="10"
                        :rules="nameRules"
                        label="张"
                        hide-details
                        required
                      ></v-text-field>
                    </v-col>

                    <v-col
                      cols="12"
                      md="12"
                    >
                      <div class="d-flex align-center text-[20px] text-[rgba(0,0,0,.85)] mb-[8px]">
                        <span class="text-[#ff4d4f] mr-[4px] text-[14px]">*</span>
                        <span>工作邮箱</span>
                      </div>
                      <v-text-field
                        v-model="formInfo.email"
                        :rules="emailRules"
                        label="E-mail"
                        hide-details
                        required
                      ></v-text-field>
                    </v-col>
                    <v-col
                      cols="12"
                      md="12"
                    >
                      <div class="d-flex align-center text-[20px] text-[rgba(0,0,0,.85)] mb-[8px]">
                        <span class="text-[#ff4d4f] mr-[4px] text-[14px]">*</span>
                        <span>办公电话</span>
                      </div>
                      <div class="d-flex">
                        <v-text-field
                          class="w-3/12"
                          v-model="formInfo.code"
                          label="地区"
                          hide-details
                          required
                        ></v-text-field>
                        <v-divider :thickness="2" vertical color="info"></v-divider>
                        <v-text-field
                          class="w-9/12"
                          v-model="formInfo.phone"
                          label="请输入手机号"
                          hide-details
                          required
                        ></v-text-field>
                      </div>

                    </v-col>
                    <v-col
                      cols="12"
                      md="12"
                    >
                      <div class="d-flex align-center text-[20px] text-[rgba(0,0,0,.85)] mb-[8px]">
                        <span class="text-[#ff4d4f] mr-[4px] text-[14px]">*</span>
                        <span>公司名称</span>
                      </div>
                      <v-text-field
                        v-model="formInfo.company"
                        label="请输入公司名"
                        hide-details
                        required
                      ></v-text-field>
                    </v-col>
                    <v-col
                      cols="12"
                      md="12"
                    >
                      <div class="d-flex align-center text-[20px] text-[rgba(0,0,0,.85)] mb-[8px]">
                        <span class="text-[#ff4d4f] mr-[4px] text-[14px]"></span>
                        <span>公司网址<span class="ml-[4px] text-[rgba(4,15,36,.451)] text-[13px]">(可选)</span></span>
                      </div>
                      <v-text-field
                        v-model="formInfo.address"
                        label="www.example.com"
                        hide-details
                      ></v-text-field>
                    </v-col>
                    <v-col
                      cols="12"
                      md="12"
                    >
                      <div class="d-flex align-center text-[20px] text-[rgba(0,0,0,.85)] mb-[8px]">
                        <span class="text-[#ff4d4f] mr-[4px] text-[14px]">*</span>
                        <span>国家/地区</span>
                      </div>
                      <v-select
                        v-model="formInfo.country"
                        :items="areaData"
                        label="请选择公司注册地"
                        required
                      ></v-select>
                    </v-col>
                    <v-col
                      cols="12"
                      md="12"
                    >
                    <v-checkbox v-model="formInfo.agree">
                      <template v-slot:label>
                        <div>
                          我确认我已阅读Antom的
                          <v-tooltip location="bottom">
                            <template v-slot:activator="{ props }">
                              <a
                                href="https://global.alipay.com/docs/ac/Platform/privacy"
                                target="_blank"
                                v-bind="props"
                                @click.stop
                              >
                                <span class="text-[#096dd9]">隐私条款</span>
                              </a>
                            </template>
                            Antom的隐私条款
                          </v-tooltip>
                          ，同意按照该政策使用我的数据。
                        </div>
                      </template>
                    </v-checkbox>

                    </v-col>
                    <v-col
                      cols="12"
                      md="12"
                    >
                    <div class="w-6/12 mx-auto">
                      <v-btn  size="x-large" color="primary" rounded="xl" class="mt-2" type="submit" block>提交</v-btn>
                    </div>

                    </v-col>
                  </v-row>
                </v-container>
              </v-form>
            </div>
        </v-sheet>
      </div>
    </v-sheet>

  </v-app>
</template>

<style scoped>

</style>